<template>
  <div class="left-chart-1">
    <div class="lc1-header">
      <span
        >本月产线累计异常停机次数：<span class="off-time-num">{{
          baseEquipMonthOffTimes
        }}</span></span
      >
      <span
        >本月产线累计异常停机时长(小时)：<span class="off-duration-num">{{
          toFix(baseEquipMonthOffDuration, 2)
        }}</span></span
      >
    </div>
    <div class="lc1-details">
      <span class="label"
        ><svg-icon icon-class="specialEqu_o" class-name="equip-icon"></svg-icon
        >设备总数</span
      >
      <span class="value">{{ totalCnt }}</span>
      <span class="label"><i class="status status-ON"></i>运行</span>
      <span class="value">{{ onCnt }}</span>
      <span class="label"><i class="status status-OFF"></i>停机</span>
      <span class="value">{{ offCnt }}</span>
      <span class="label"><i class="status status-UNKNOW"></i>离线</span>
      <span class="value">{{ unknowCnt }}</span>
    </div>

    <dv-scroll-board v-if="config.data" :config="config" />
    <div v-else class="no-data">暂无数据</div>
  </div>
</template>

<script>
import { getEquipmentOffInfo } from "@/api/dashboard/blowIrriagtionSpinLine";
export default {
  name: "RightChart2",
  props: {
    lineItem: {
      type: Object,
      default: null,
    },
    refreshKey: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      // 本月产线异常停机次数
      baseEquipMonthOffTimes: 0,
      // 累计停机时长(小时)
      baseEquipMonthOffDuration: 0,
      // 设备总数
      totalCnt: 0,
      // 运行
      onCnt: 0,
      // 停机
      offCnt: 0,
      // 离线
      unknowCnt: 0,
      // 设备列表
      config: {},
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      if (!this.lineItem) {
        return;
      }
      const param = {
        lineId: this.lineItem.value,
      };
      getEquipmentOffInfo(param).then((res) => {
        if (res?.data) {
          const {
            baseEquipMonthOffTimes,
            baseEquipMonthOffDuration,
            totalCnt,
            onCnt,
            offCnt,
            unknowCnt,
            equipmentRunStatuss,
          } = res.data;
          this.baseEquipMonthOffTimes = baseEquipMonthOffTimes;
          this.baseEquipMonthOffDuration = baseEquipMonthOffDuration;
          this.totalCnt = totalCnt;
          this.onCnt = onCnt;
          this.offCnt = offCnt;
          this.unknowCnt = unknowCnt;

          if (equipmentRunStatuss) {
            // 排序
            const sortRule = ["OFF", "ON", "UNKNOW"];
            const _equipmentRunStatuss = equipmentRunStatuss.sort((a, b) => {
              return sortRule.indexOf(a.runStatus || "UNKNOW") >=
                sortRule.indexOf(b.runStatus || "UNKNOW")
                ? 1
                : -1;
            });
            let data = [];
            const rowSize = 2;
            const rowNum = Math.ceil(_equipmentRunStatuss.length / rowSize);
            for (let i = 0; i < rowNum; i++) {
              let row = _equipmentRunStatuss.slice(
                i * rowSize,
                (i + 1) * rowSize
              );
              const dataStrs = row.map(
                (ele) => `
                 <i class="status status-${ele.runStatus}"></i>
                <span class="equip-name">${ele.equipName}</span>
                <span class="equip-detail">
                  （<span class="off-time-num">${
                    ele.equipMonthAbnormalTimes || 0
                  }</span>
                  <span class="off-duration-num">
                    ${this.toFix(ele.equipMonthAbnormalDuration || 0, 2)}
                  </span
                  >）
                </span>
              `
              );
              data.push(dataStrs);
            }
            this.config = {
              data: data,
              oddRowBGC: "none",
              evenRowBGC: "none",
              align: ["left"],
            };
          }
        }
      });
    },
  },
  watch: {
    refreshKey: {
      handler() {
        this.getData();
      },
    },
  },
};
</script>

<style lang="less" scoped>
.left-chart-1 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 40px;

  .lc1-header {
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    font-size: 15px;
  }

  .lc1-details {
    line-height: 45px;
    font-size: 15px;
    .label {
      margin-right: 10px;
    }
    .value:not(:last-child) {
      margin-right: 15px;
    }
  }

  .lc1-chart {
    flex: 1;
    font-size: 16px;
    font-weight: bold;
  }
  .dv-scroll-board {
    flex: 1;
  }
  ::v-deep {
    .dv-scroll-board .rows .ceil {
      display: flex;
      align-items: center;
    }
    .equip-name {
      white-space: wrap;
      line-height: 14px;
      display: inline-block;
    }
    .equip-detail {
      white-space: nowrap;
      .off-time-num {
        margin-right: 8px;
      }
    }
    .off-time-num {
      color: #faff00;
    }
    .off-duration-num {
      color: #f56c6c;
    }
    .equip-icon {
      margin-right: 5px;
      font-size: 18px;
      color: #67c23a;
    }
    .status {
      display: inline-block;
      width: 10px;
      height: 10px;
      min-width: 10px;
      min-height: 10px;
      border-radius: 50%;
      margin-right: 5px;
      &-ON {
        background-color: #67c23a;
      }
      &-OFF {
        background-color: #f56c6c;
      }
      &-UNKNOW {
        background-color: #909399;
      }
    }
  }
}
.no-data {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  opacity: 0.6;
}
</style>
